<template>
  <div class="home-list">
    <ArticleOverview 
      v-for="item in articleList" 
      :key="item.id" 
      :articleInfo="item"
    ></ArticleOverview>

    <Pagination
      :total="total"
      :pageIndex.sync="pageIndex"
    ></Pagination>
  </div>
</template>

<script>
import { getArticleList } from "@/request/article";
import ArticleOverview from "@/component/article/index.vue";
import Pagination from "@/component/pagination/index.vue";

export default {
  components: {
    ArticleOverview,
    Pagination,
  },
  data(){
    return {
      articleList: [],
      total: 0,
      pageIndex: 1,
    }
  },
  watch:{
    pageIndex(){
      this.getArticleList();
    }
  },
  mounted(){
    this.getArticleList();
  },
  methods:{
    async getArticleList(){
      const res = await getArticleList({ pageIndex: this.pageIndex, pageSize:10 });
      if(res?.code == 200){
        this.articleList = res?.data?.list || [];
        this.total = res?.data?.total || 0;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home-list {
  width: 100%;
  height: 100%;
}
</style>
